<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>layui</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="./layui/css/layui.css">
    <style>
        .container {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .header {
            background: #393D49;
            height: 60px;
            padding: 0 20px;
        }

        .header .logo {
            color: #ffffff;
            font-size: 20px;
            font-weight: bold;
        }

        .content {
            flex: 1;
        }

        .content>.left {
            width: 200px;
            background: #393D49;
        }

        .content>.right {
            flex: 1;
            padding: 10px;
        }

        .pages {
            margin: 0px auto;
        }
        
        .search{
           margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header flex j-s a-c">
            <div class="logo">LOGO</div>
            <ul class="layui-nav" lay-filter="">
                <li class="layui-nav-item"><a href="">最新活动</a></li>
                <li class="layui-nav-item layui-this"><a href="">产品</a></li>
                <li class="layui-nav-item"><a href="">大数据</a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;">解决方案</a>
                    <dl class="layui-nav-child">
                        <!-- 二级菜单 -->
                        <dd><a href="">移动模块</a></dd>
                        <dd><a href="">后台模版</a></dd>
                        <dd><a href="">电商平台</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">社区</a></li>
            </ul>
        </div>
        <div class="content flex">
            <div class="left">
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
                    <li class="layui-nav-item layui-nav-itemed">
                        <a href="javascript:;">默认展开</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;">选项1</a></dd>
                            <dd><a href="javascript:;">选项2</a></dd>
                            <dd><a href="">跳转</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">解决方案</a>
                        <dl class="layui-nav-child">
                            <dd><a href="">移动模块</a></dd>
                            <dd><a href="">后台模版</a></dd>
                            <dd><a href="">电商平台</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item"><a href="">产品</a></li>
                    <li class="layui-nav-item"><a href="">大数据</a></li>
                </ul>
            </div>
            <div class="right">
                <span class="layui-breadcrumb">
                    <a href="">首页</a>
                    <a href="">国际新闻</a>
                    <a href="">亚太地区</a>
                    <a><cite>正文</cite></a>
                </span>
                <div class="search">
                    <div class="layui-form-item">
                        <label class="layui-form-label">请输入：</label>
                        <div class="layui-input-inline">
                          <input type="text" name="" placeholder="请输入搜索内容" class="layui-input">
                        </div>
                        <button type="button" class="layui-btn">搜索</button>
                      </div>
                </div>
                <table class="layui-table">
                    <colgroup>
                        <col width="100">
                        <col >
                        <col width="100">
                        <col width="100">
                        <col width="250">
                    </colgroup>
                    <thead>
                        <tr>
                            <th>编号</th>
                            <th>名称</th>
                            <th>数量</th>
                            <th>价格</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <script id="temp" type="text/html">
                        {{each $data item}}
                        <tr>
                            <td>{{item.id}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.count}}</td>
                            <td>{{item.price}}</td>
                            <td>
                                <button type="button" class="layui-btn layui-btn-sm">
                                    <i class="layui-icon layui-icon-share"></i>查看</button>
                                <button type="button" class="layui-btn layui-btn-warm layui-btn-sm">
                                    <i class="layui-icon layui-icon-edit"></i>编辑</button>
                                <button type="button" class="layui-btn layui-btn-danger layui-btn-sm">
                                    <i class="layui-icon layui-icon-delete"></i>删除</button>
                            </td>
                        </tr>
                        {{/each}}
                        </script>
                    </tbody>
                </table>
                <div class="flex j-c">
                    <div id="pages"></div>
                </div>
            </div>
        </div>
    </div>
    <script src="./layui/layui.js"></script>
    <script src="./js/artTemplate.js"></script>
    <script>
        //注意：导航 依赖 element 模块，否则无法进行功能性操作
        layui.use(['element', 'laypage','jquery'], function () {
            var element = layui.element;    //引入导入模块
            var laypage = layui.laypage;    //引入分页模块
            var $ = layui.jquery            //引入jquery

            //分页
            laypage.render({
                elem: 'pages' //注意，这里的 pages 是 ID，不用加 # 号
                , count: 50 //数据总数，从服务端得到
            });

            $.get('./data/goods.json',data=>{
                $('tbody').html(template('temp',data))
            })
        });

    </script>
</body>

</html>